<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="favicon.ico" >
<link rel="Shortcut Icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" src="../lib/html5.js"></script>
<script type="text/javascript" src="../lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="../../static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="../../lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="../http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script><![endif]-->
<!--/meta 作为公共模版分离出去-->

<title>密码管理器 v1.0</title>
</head>
<body >
<script>

</script>
<!--_header 作为公共模版分离出去-->
<header class="navbar-wrapper">
	<div class="navbar navbar-fixed-top">
		<div class="container-fluid cl"> <a class="logo navbar-logo f-l mr-10 hidden-xs" href="/aboutHui.shtml">密码管理</a> <a class="logo navbar-logo-m f-l mr-10 visible-xs" href="/aboutHui.shtml"></a> <span class="logo navbar-slogan f-l mr-10 hidden-xs">v1.0</span> <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>
			<nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
				<ul class="cl">
					<li>当前用户</li>
					<li class="dropDown dropDown_hover"> <a href="#" class="dropDown_A" th:text="${cuUserName}"> <i class="Hui-iconfont">&#xe6d5;</i></a>
						<ul class="dropDown-menu menu radius box-shadow">
							<!--<li><a href="javascript:;" onClick="myselfinfo()">个人信息</a></li>-->
							<!--<li><a href="#">切换账户</a></li>-->
							<li><a href="#">退出</a></li>
						</ul>
					</li>
					<!--<li id="Hui-msg"> <a href="#" title="消息"><span class="badge badge-danger">1</span><i class="Hui-iconfont" style="font-size:18px">&#xe68a;</i></a> </li>-->
					<li id="Hui-skin" class="dropDown right dropDown_hover"> <a href="javascript:;" class="dropDown_A" title="换肤"><i class="Hui-iconfont" style="font-size:18px">&#xe62a;</i></a>
						<ul class="dropDown-menu menu radius box-shadow">
							<li><a href="javascript:;" data-val="default" title="默认（黑色）">默认（黑色）</a></li>
							<li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a></li>
							<li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
							<li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
							<li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
							<li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
						</ul>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</header>
<!--/_header 作为公共模版分离出去-->

<!--_menu 作为公共模版分离出去-->

<aside class="Hui-aside">
	
	<div class="menu_dropdown bk_2">
		<dl id="menu-member">
			<dt class="selected"><i class="Hui-iconfont">&#xe60d;</i> 密码管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
			<dd style="display: block;">
				<ul>
					<li class="current"><a href="member-list.html" title="密码列表">密码列表</a></li>
                </ul>
			</dd>
		</dl>
	</div>
</aside>
<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div>
<!--/_menu 作为公共模版分离出去-->
<div >


<section class="Hui-article-box" >
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 密码 <span class="c-gray en">&gt;</span> 密码列表<a class="btn btn-success radius r" id="btn-refresh" onclick="javascript:location.replace(location.href);" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
	<div class="Hui-article" >
		<article class="cl pd-20" >
			<div class="text-c"> 日期范围：
				<input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}'})" id="datemax" class="input-text Wdate" style="width:120px;">
				-
				<input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d'})" id="datemin" class="input-text Wdate" style="width:120px;">
				<input type="text" class="input-text" style="width:250px" placeholder="输入密码名称，登录账号，密码" id="select1" name="">
				<button type="button" class="btn btn-success radius"  id="selectByNameAndTime" name=""><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
			</div>
			<div class="cl pd-5 bg-1 bk-gray mt-20" >
				<span class="l"><a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> <a href="javascript:;" onclick="member_add('添加用户','../pwd-add.html',700,'430')" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加用户</a></span> <span class="r">共有数据：<strong > <span id="listSize" th:text="${listSize}" ></span></strong> &nbsp 条</span>
			</div>
			<div class="mt-20">
				<table class="table table-border table-bordered table-hover table-bg table-sort" id ="table_refresh" th:fragment="table_refresh" >
					<thead>
					<tr class="text-c">
						<th width="25"><input type="checkbox" name="" value=""></th>
						<th width="80">ID</th>
						<th width="100">密码名称</th>
						<th width="150">登录账号</th>
						<th width="200">用户密码</th>
						<th width="250">链接地址</th>
						<th width="">备注</th>
						<th width="100">操作</th>
					</tr>
					</thead>
					<tbody >
						<tr class="text-c" id = "tr1"  th:each = "cuPwd,cuPwdStat:${pwds}">
							<td><input type="checkbox" th:value="${cuPwd.id}" name=""></td>
							<td th:text="${cuPwdStat.count}"></td>
							<td th:text="${cuPwd.name}" ></td>
							<td th:text="${cuPwd.loginName}" ></td>
							<td th:text="${cuPwd.loginPwd}" ></td>
							<td th:text="${cuPwd.url}" ></td>
							<td th:text="${cuPwd.remark}" ></td>
							<td class="td-manage"><a title="编辑" href="javascript:;" th:onclick="|member_edit('编辑','pwd/pwd-add.html',${cuPwd.id},'700','430')|" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>  <a title="删除" href="javascript:;" th:onclick="|member_del(this,${cuPwd.id})|" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a></td>
						</tr>
					</tbody>
				</table>
			</div>
		</article>
	</div>
</section>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../../lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="../../static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="../../static/h-ui.admin/js/H-ui.admin.page.js"></script>
<!--/_footer /作为公共模版分离出去-->

<script type="text/javascript">
    // $(function(){
    // 	$('.table-sort tbody').on( 'click', 'tr', function () {
    // 		if ( $(this).hasClass('selected') ) {
    // 			$(this).removeClass('selected');
    // 		}
    // 		else {
    // 			table.$('tr.selected').removeClass('selected');
    // 			$(this).addClass('selected');
    // 		}
    // 	});
    // });
    /*用户-添加*/
    function member_add(title,url,w,h){
        layer_show(title,url,w,h);
    }
    /*用户-查看*/
    function member_show(title,url,id,w,h){
        layer_show(title,url,w,h);
    }
    /*用户-停用*/
    function member_stop(obj,id){
        layer.confirm('确认要停用吗？',function(index){
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe6e1;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
            $(obj).remove();
            layer.msg('已停用!',{icon: 5,time:1000});
        });
    }

    /*用户-启用*/
    function member_start(obj,id){
        layer.confirm('确认要启用吗？',function(index){
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
            $(obj).remove();
            layer.msg('已启用!',{icon: 6,time:1000});
        });
    }
    /*用户-编辑*/
    function member_edit(title,url,id,w,h){
        layer_show(title,"/pwd/updateHtml?id="+id,w,h);
    }
    /*密码-修改*/
    function change_password(title,url,id,w,h){
        layer_show(title,url,w,h);
    }
    /*用户-删除*/
    function member_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            console.log(id);
            $.ajax({
                url:"/pwd/delete",
                type: "post",
                data:{id:id},
                async:false,
                success:function(data) {
                    console.log(111);
                    if("000" == data.code){
                        $('#btn-refresh').click();
                        parent.layer.msg('删除成功!',{icon:1,time:1000},function () {
                        });
                    }else {
                        parent.layer.msg('删除失败!',{icon:1,time:1000});
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    // console.log(XMLHttpRequest);
                    parent.layer.msg('服务器未响应,请稍后再试',{icon:1,time:1000});
                }
            });
            $(obj).parents("tr").remove();
            layer.msg('已删除!',{icon:1,time:1000});
        });
    }

    /**
     * 提交表单
     * 适用场景：form表单的提交，主要用在用户、角色、资源等表单的添加、修改等
     * @param {Object} commitUrl 表单提交地址
     */
    function commit(formId, commitUrl) {
        //组装表单数据
        var index;
        var data = $("#" + formId).serialize();
        $.ajax({
            type: "POST",
            url: commitUrl,
            data: data,
            dataType: "json",
            success: function (resultdata) {
                if (resultdata.success) {
                    parent.layer.close(index);
                    layer.msg(resultdata.message, {icon: 1, time: 2000});
                    setTimeout('window.parent.location.reload()', 1000);
                } else {
                    layer.msg(resultdata.message, {icon: 5});
                }
            },
            error: function (data, errorMsg) {
                layer.close(index);
                layer.msg(data.responseText, {icon: 2});
            }
        });
    }

    /**
     * 表单的删除
     * @param url 删除地址
     * @param id  删除id 如果是批量，可以不写
     */
    function datadel(url, id) {
        var selectList;
        if (id != null) {
            selectList = id;
        } else {
            selectList = jQuery(".table tbody input[type=checkbox]:checked").map(function () {
                return jQuery(this).val();
            }).get().join(',');
        }
        if (selectList != null && selectList != '') {
            layer.confirm('确认要删除吗？', function (index) {
                $.ajax({
                    type: "POST",
                    url: "/pwd/deletePwds",
                    data: {
                        "ids": selectList
                    },
                    dataType: "json",
                    success: function (resultdata) {
                        if ("000" == resultdata.code) {
                            setTimeout('window.location.reload()', 0020);
                            // layer.msg(resultdata.message, {icon: 1, time: 2000});
                            parent.layer.msg('删除成功!',{icon:1,time:1000});
                        } else {
                            layer.msg(resultdata.message, {icon: 5});
                        }
                    },
                    error: function (errorMsg) {
                        layer.msg('服务器未响应,请稍后再试', {icon: 3});
                    }
                });
            });
        } else {
            layer.msg("你没有选择行", {icon: 0});
        }
    }
    // $(document).ready(function() {
    $("#selectByNameAndTime").click(function(){
        var name = $("#select1").val();
        var begin = $("#datemax").val();
        var end = $("#datemin").val();
        var data = {name:name,begin:begin,end:end};
        // 装载局部刷新返回的页面
        $('#table_refresh').load(
            "/pwd/getListByTimeAndName",
            {begin:begin,end:end,name:name}
        )
        getPwdsSize(data);

    });
    function getPwdsSize(data) {
		$.ajax({
            url: "/pwd/pwdsSize",
            type: "post",
            data: data,
            dataType: "json",
			success:function (data) {
                if ("000" == data.code) {
                    $("#listSize").html(data.data);
				}
            }
		})
    }
</script>
<script th:inline="javascript">
	function test1() {
        var single = [[${listSize}]];
        console.log(single)
    }
</script>



<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="../../lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../lib/laypage/1.2/laypage.js"></script>
<!--/请在上方写此页面业务相关的脚本-->
<div class="hui-common-title" style="margin-top:15px;">
	<div class="hui-common-title-line"></div>
	<div class="hui-common-title-txt">居中页码</div>
	<div class="hui-common-title-line"></div>
</div>
<div class="hui-pager hui-pager-center" style="padding:10px 30px;">
	<div><a href="javascript:hui.toast('第11页');">11</a></div>
	<div><a href="javascript:hui.toast('第12页');">12</a></div>
	<div><a href="javascript:hui.toast('第13页');" class="hui-pager-active">13</a></div>
	<div><a href="javascript:hui.toast('第14页');">14</a></div>
	<div><a href="javascript:hui.toast('第15页');">15</a></div>
</div>
</body>
</html>